<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>中国铁路12306</title>
	<link rel="stylesheet" href="css/register.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body style="overflow-x: hidden;">
	<!-- 头部 -->
	<header>
		<div id="wrapper">
			<!-- 头部内容 -->
			<div id="header-con">
				<a href="homepage.jsp" id="logo2x">
					<img src="images/logo@2x.png" alt="">
				</a>
				<!-- 搜索框 -->
				<div id="search">
					<div id="search-con">
						<input type="text" placeholder="搜索车票、餐饮、常旅客、相关规章" id="searchText" name="searchs">
						<input type="image" src="images/smallSearch.png" id="search-img">
					</div>
				</div>
				<!-- 右侧菜单 -->
				<ul id="topMenu">
					<li id="heart_schema">
						 <a href="">
						 	爱心模式
              			</a>
					</li>
					<li class="menu-line">|</li>
					<li id="Englishs">
						<a href="">
							<span >English</span>
						</a>
						<ul id="EnglishSlide">
							<li>
								<a href="">简体中文</a>
							</li>
							<li>
								<a href="">English</a>
							</li>
						</ul>
					</li>
					<li class="menu-line">|</li>
					<li id="myslide">
						<a href="">
							<span >我的12306</span>
						</a>
						<ul id="my12306">
							<li>
								<a href="">火车订票</a>
							</li>
							<li>
								<a href="">候补订单</a>
							</li>
							<li>
								<a href="">计次•定期票订单</a>
							</li>
							<li>
								<a href="">约号订单</a>
							</li>
							<li>
								<a href="">本人车票</a>
							</li>
							<li class="myline"></li>
							<li>
								<a href="">我的餐饮•特产</a>
							</li>
							<li>
								<a href="">我的保险</a>
							</li>
							<li>
								<a href="">我的会员</a>
							</li>
							<li class="myline"></li>
							<li>
								<a href="">查看个人信息</a>
							</li>
							<li>
								<a href="">账户安全</a>
							</li>
							<li class="myline"></li>
							<li>
								<a href="">乘车人</a>
							</li>
							<li>
								<a href="">地址管理</a>
							</li>
							<li class="myline"></li>
							<li>
								<a href="">温馨服务查询</a>
							</li>
						</ul>
					</li>
					<li class="menu-line">|</li>
					<li id="a-black">
						您好，请<a href="login.jsp">登录</a>
						<a href="register.jsp">注册</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 导航 -->
		<div id="nav-box">
			<div id="wrapper1">
				<ul>
					<li>
						<a href="">首页</a>
					</li>
					<li id="n_arrow_ticket">
						<a href="">车票
							<img src="images/n_arrow.gif" alt="" class="n_arrow">
						</a>
						<div class="navigation" id="ticket">
							<nav id="ticket-con0">
								<h3>购买</h3>
								<div>
									<a href="">
										<span>单程</span>
									</a>
									<a href="">
										<span>中转换乘</span>
									</a>
								</div>
							</nav>
							<nav id="ticket-con1">
								<h3></h3>
								<div>
									<a href="">
										<span>往还</span>
									</a>
									<a href="">
										<span>计次·定期票</span>
									</a>
								</div>
							</nav>
							<nav id="ticket-con3">
								<h3>变更</h3>
								<div>
									<a href="">
										<span>退票</span>
									</a>
									<a href="">
										<span>变更到站</span>
									</a>
								</div>
							</nav>
							<nav id="ticket-con4">
								<h3></h3>
								<div>
									<a href="">
										<span>改签</span>
									</a>
									<a href="">
										<span></span>
									</a>
								</div>
							</nav>
							<nav id="ticket-con5">
								<h3>更多</h3>
								<div>
									<a href="">
										<span>中铁银通卡</span>
									</a>
									<a href="">
										<span>市郊快速铁路</span>
									</a>
								</div>
							</nav>
							<nav id="ticket-con6">
								<h3></h3>
								<div>
									<a href="">
										<span>广九直通车</span>
									</a>
									<a href="">
										<span>国际列车</span>
									</a>
								</div>
							</nav>
						</div>
					</li>
					<li id="n_arrow_team">
						<a href="">团购服务
							<img src="images/n_arrow.gif" alt="" class="n_arrow">
						</a>
						<div class="navigation" id="team">
							<nav>
								<a href="">
									<span>务工人员</span>
								</a>
								<a href="">
									<span>学生团体</span>
								</a>
							</nav>
						</div>
					</li>
					<li id="n_arrow_vipServe">
						<a href="">会员服务
							<img src="images/n_arrow.gif" alt="" class="n_arrow">
						</a>
						<div class="navigation" id="vipServe">
							<nav>
								<a href="">
									<span>会员管理</span>
								</a>
								<a href="">
									<span>积分账户</span>
								</a>
								<a href="">
									<span>积分兑换</span>
								</a>
								<a href="">
									<span>会员专享</span>
								</a>
								<a href="">
									<span>会员中心</span>
								</a>
							</nav>
						</div>
					</li>
					<li id="n_arrow_station">
						<a href="">站车服务
							<img src="images/n_arrow.gif" alt="" class="n_arrow">
						</a>
						<div class="navigation" id="station">
							<nav id="station-con1">
								<div>
									<a href="">
										<span>重点旅客预约</span>
									</a>
									<a href="">
										<span>遗失物品查找</span>
									</a>
								</div>
							</nav>
							<nav id="station-con2">
								<div>
									<a href="">
										<span>便民托运</span>
									</a>
									<a href="">
										<span>动车组介绍</span>
									</a>
								</div>
							</nav>
							<nav id="station-con3">
								<div>
									<a href="">
										<span> 共享汽车</span>
									</a>
									<a href="">
										<span>定制接送</span>
									</a>
								</div>
							</nav>
							<nav id="station-con4">
								<div>
									<a href="">
										<span> 车站引导</span>
									</a>
									<a href="">
										<span>站车风采</span>
									</a>
								</div>
							</nav>
						</div>
					</li>
					<li id="n_arrow_tour">
						<a href="">商旅服务
							<img src="images/n_arrow.gif" alt="" class="n_arrow">
						</a>
						<div class="navigation" id="tour">
							<nav>
								<a href="">
									<span>餐饮·特产</span>
								</a>
								<a href="">
									<span>旅游</span>
								</a>
								<a href="">
									<span>保险</span>
								</a>
							</nav>
						</div>
					</li>
					<li id="n_arrow_trip">
						<a href="">出行指南
							<img src="images/n_arrow.gif" alt="" class="n_arrow">
						</a>
						<div class="navigation" id="trip">
							<nav id="trip-con0">
								<h3>常见问题</h3>
								<div>
									<a href="">
										<span>车票</span>
									</a>
									<a href="">
										<span>改签、变更到站</span>
									</a>
									<a href="">
										<span>更多</span>
									</a>
								</div>
							</nav>
							<nav id="trip-con1">
								<h3></h3>
								<div>
									<a href="">
										<span>购票</span>
									</a>
									<a href="">
										<span>退票</span>
									</a>
								</div>
							</nav>
							<nav id="trip-con3">
								<h3>旅客须知</h3>
								<div>
									<a href="">
										<span>铁路电子客票</span>
									</a>
									<a href="">
										<span>更多</span>
									</a>
								</div>
							</nav>
							<nav id="trip-con4">
								<h3></h3>
								<div>
									<a href="">
										<span>身份验证</span>
									</a>
									<a href="">
										<span></span>
									</a>
								</div>
							</nav>
							<nav id="trip-con5">
								<h3>相关章程</h3>
								<div>
									<a href="">
										<span>铁路互联网售票暂行方法</span>
									</a>
									<a href="">
										<span>铁路进站乘车禁止和跟……</span>
									</a>
									<a href="">
										<span>更多</span>
									</a>
								</div>
							</nav>
							<nav id="ticket-con6">
								<h3></h3>
								<div>
									<a href="">
										<span>铁路旅客运输规程</span>
									</a>
									<a href="">
										<span>广深港高速铁路跨境旅客……</span>
									</a>
								</div>
							</nav>
						</div>
					</li>
					<li id="n_arrow_message">
						<a href="">信息查询
							<img src="images/n_arrow.gif" alt="" class="n_arrow">
						</a>
						<div class="navigation" id="message">
							<nav id="message-con0">
								<h3>常用查询</h3>
								<div>
									<a href="">
										<span>正晚点</span>
									</a>
									<a href="">
										<span>天气</span>
									</a>
								</div>
							</nav>
							<nav id="message-con1">
								<h3></h3>
								<div>
									<a href="">
										<span>时刻表</span>
									</a>
									<a href="">
										<span>交通查询</span>
									</a>
								</div>
							</nav>
							<nav id="message-con3">
								<h3></h3>
								<div>
									<a href="">
										<span>公布票价</span>
									</a>
									<a href="">
										<span>代售点</span>
									</a>
								</div>
							</nav>
							<nav id="message-con4">
								<h3></h3>
								<div>
									<a href="">
										<span>检票口</span>
									</a>
									<a href="">
										<span>客户电话</span>
									</a>
								</div>
							</nav>
							<nav id="message-con5">
								<h3></h3>
								<div>
									<a href="">
										<span>起售时间</span>
									</a>
									<a href="">
										<span>列车状态</span>
									</a>
								</div>
							</nav>
							<nav id="message-con6">
								<h3></h3>
								<div>
									<a href="">
										<span>最新发布</span>
									</a>
									<a href="">
										<span>信用信息</span>
									</a>
								</div>
							</nav>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</header>
	<div id="register">
		<div id="register-all">
			<div id="register-header">
				你现在的位置：<a href="">客运首页</a>
							 > <a href="12306/register.html">注册</a>
			</div>
			<div id="register-body">
				<div id="user-information">&nbsp;&nbsp;&nbsp;&nbsp;账户信息</div>
				<div id="user-register">
					<form action="register.do" method="post" id="register-form">
						<div id="ko"></div>

						<!-- 用户名 -->
						<div id="input-username" class="div-all">
							<div class="text-left">
								<span>*</span>
							    用户名：
							</div>
							<div class="text-center">
								<input type="text" name="user_name" placeholder="用户设置成功后不可修改" class="style-black" id="username">
							</div>
							<div class="text-right">
								<span>6-30位字母,数字或"_",字母开头</span>
							</div>
						</div>
						<div class="div-all-error" id="error-name">
							<div class="text-left-error"></div>
							<div class="text-center-error" id="error-name-text">
								
							</div>
							<!-- <div class="text-right-error"></div> -->
						</div>


                        <!-- 登录密码 -->
						<div id="input-password" class="div-all">
							<div class="text-left">
								<span>*</span>
							    登录密码：
							</div>
							<div class="text-center">
								<input type="password" placeholder="6-20位字母，数字或符号" class="style-black" id="password01">
							</div>
							<div class="text-right">
								<span>密码为6-20位数字、字母或下划线,至少包括其中两种,以字母开头!</span>
							</div>
						</div>
						<div class="div-all-error" id="error-password01">
							<div class="text-left-error"></div>
							<div class="text-center-error" id="error-password01-text">
								
							</div>
							<!-- <div class="text-right-error"></div> -->
						</div>

                        <!-- 确认密码 -->
						<div id="input-password-confirm" class="div-all">
							<div class="text-left">
								<span>*</span>
							    确认密码：
							</div>
							<div class="text-center">
								<input type="password" name="user_password" placeholder="再次输入您的登录密码" class="style-black" id="password02">
							</div>
							<div class="text-right"></div>
						</div>
						<div class="div-all-error" id="error-password02">
							<div class="text-left-error"></div>
							<div class="text-center-error" id="error-password02-text">
								
							</div>
							<!-- <div class="text-right-error"></div> -->
						</div>

                        <!-- 证件类型 -->
						<div id="input-idCard" class="div-all">
							<div class="text-left">
								<span>*</span>
							    证件类型：
							</div>
							<div class="text-center">
								<select name="user_id_type" id="select-idCard">
								   <option value="1">中国居民身份证</option>
								   <option value="2">港澳台居民居住证</option>
							    </select>
							</div>
							<div class="text-right">
								<span>证件填写规则</span>
							</div>
						</div>

						<!-- 姓名 -->
                        <div id="input-realname" class="div-all">
                        	<div class="text-left">
                        		<span>*</span>
							    姓名：
                        	</div>
							<div class="text-center">
								<input type="text" name="user_real_name" placeholder="请输入证件上的中文姓名" class="style-black" id="realname">
							</div>
							<div class="text-right">
								<span>证件填写规则（用于身份验证，请正确填写）</span>
							</div>
						</div>
						<div class="div-all-error" id="error-realname">
							<div class="text-left-error"></div>
							<div class="text-center-error" id="error-realname-text">
								
							</div>
							<!-- <div class="text-right-error"></div> -->
						</div>

						<!-- 证件号码 -->
                        <div id="input-idCard-num" class="div-all">
                        	<div class="text-left">
                        		<span>*</span>
							    证件号码：
                        	</div>
							<div class="text-center">
								<input type="text" name="user_id_num" placeholder="请输入您的证件号码" class="style-blue" id="idNum">
							</div>
							<div class="text-right">
								<span>（用于身份验证，请正确填写）</span>
							</div>
						</div>
						<div class="div-all-error" id="error-idNum">
							<div class="text-left-error"></div>
							<div class="text-center-error" id="error-idNum-text">
								
							</div>
							<!-- <div class="text-right-error"></div> -->
						</div>

						<!-- 旅客类型 -->
						<div id="input-passenger-type" class="div-all">
							<div class="text-left">
								<span>*</span>
							    旅客类型：
							</div>
							<div class="text-center">
								<select name="passenger_type" id="select-type">
								    <option value="1">成人</option>
								    <option value="2">儿童</option>
								    <option value="3">学生</option>
								    <option value="4">残疾军人，伤残人民警察</option>
							    </select>
							</div>
							<div class="text-right">
								<span>证件填写规则</span>
							</div>
						</div>

                        <!-- 虚线 -->
                        <div class="div-all" id="input-dashed">
                        	<div></div>
                        </div>

                        <!-- 邮箱 -->
                        <div id="input-email" class="div-all">
                        	<div class="text-left">
                        		邮箱：
                        	</div>
                        	<div class="text-center">
                        		<input type="email" name="user_email" placeholder="请正确填写邮箱地址" class="style-black" id="email">
                        	</div>
                        	<div class="text-right">
                        		
                        	</div>
                        </div>
                        <div class="div-all-error" id="error-email">
							<div class="text-left-error"></div>
							<div class="text-center-error" id="error-email-text">
								
							</div>
							<!-- <div class="text-right-error"></div> -->
						</div>

                        <!-- 手机号码 -->
                        <div id="input-phone" class="div-all">
                        	<div class="text-left">
                        		<span>*</span>
                        	    手机号码（+86）：
                        	</div>
                        	<div class="text-center">
                        		<input type="text" name="user_phone" placeholder="请输入您的手机号码" class="style-blue" id="phone">
                        	</div>
                        	<div class="text-right">
                        		<span>请填写正确的手机号码，稍后将向该手机号码发送短信验证码</span>
                        	</div>
                        </div>
                        <div class="div-all-error" id="error-phone">
							<div class="text-left-error"></div>
							<div class="text-center-error" id="error-phone-text">
								
							</div>
							<!-- <div class="text-right-error"></div> -->
						</div>
                        
                        <!-- 条款 -->
                        <div id="input-clause" class="div-all">
                        	<div class="text-left">
                        		
                        	</div>
                        	<div id="checkbox-box">
                        		<input type="checkbox" >
                        		我已阅读并同意遵守 <a href="">《中国铁路客户服务中心网站服务条款》</a> <a href="">《隐私权政策》</a>
                        	</div>
                        </div>
                        <div id="input-submit">
                        	<div id="input-submit-center">
                        		<input type="submit" name="sub" value="下一步" id="submits">
                        	</div>
                        </div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- 站位 -->
	<div id="zhanwei"></div>
	<!-- 底部 -->
	<footer>
		<div id="footer-box">
			<div id="fridendship-link">
				<h4>友情链接</h4>
				<ul id="link-top">
					<li>
						<a href="">
							<img src="images/link05.png" alt="">
						</a>
					</li>
					<li>
						<a href="">
							<img src="images/link02.png" alt="">
						</a>
					</li>
				</ul>
				<ul id="link-down">
					<li>
						<a href="">
							<img src="images/link03.png" alt="">
						</a>
					</li>
					<li>
						<a href="">
							<img src="images/link04.png" alt="">
						</a>
					</li>
				</ul>
			</div>
			<div id="WeChat">
				<div class="imgDiv">
					<h5 class="foot-con-tit">中国铁路官方微博</h5>
						<div class="code-pic01">
							<img src="images/zgtlwb.png"/>
						</div>
				</div>
				<div class="imgDiv">
					<h5 class="foot-con-tit">中国铁路官方微信</h5>
						<div class="code-pic02">
							<img src="images/zgtlwx.png"/>
						</div>
				</div>
				<div class="imgDiv">
					<h5 class="foot-con-tit">12306 公众号</h5>
						<div class="code-pic03">
							<img src="images/public.png"/>
						</div>
				</div>
				<div class="imgDiv">
					<h5 class="foot-con-tit">铁路12306</h5>
						<div class="code-pic04">
							<img src="images/downloads.png"/>
						</div>
				</div>
				<div class="imgDiv">
					<div class="code-tips">官方APP下载,目前铁路未授权其他网站或APP开展类似服务内容，敬请广大用户注意。</div>
				</div>
			</div>
		</div>
		<div id="footer-footer">
			<div id="footer-center">
				<div id="footer-left">
					<p class="p1">版权所有©2008-2022&nbsp;&nbsp;&nbsp;中国铁道科学研究院集团有限公司&nbsp;&nbsp;&nbsp;技术支持：铁旅科技有限公司</p>
					<p class="p2">
						<img src="images/gongan.png" alt=""><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802038392">京公网安备 11010802038392号</a> 中国国家铁路集团有限公司 | 京ICP备05020493号-4 | ICP证：京B2-20202537
					</p>
				</div>
				<div id="footer-right">
					<img src="images/footer-slh.jpg" alt="">
				</div>
			
			</div>
		</div>
		
	</footer>
</body>

<script src="js/register.js"></script>
</html>